<template>
  <div>
    <h2>Home</h2>
    
      <!-- 编程式路由导航 -->
      <button @click="toNews">新闻</button>
      <button  @click="toMusic">音乐</button>
      <button @click="toGame">游戏</button>

    <!-- home中的二级路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:"Home",
    methods:{
      // 编程式路由导航，我们给每一个组件实例注入的$router上的方法（在VueRouter.prototype上）
          // this.$router.push():push有两个参数：string 和 location对象
          // this.$router.replace()
          // this.$router.go()


          //  push重复导航会报出promise的错:
          // - push在导航时,如果发现已经是当前路径,则会抛出promise异常
          // - push如果书写第二个和第三个参数,代表成功和失败的回调函数就可以了
          // - push如果不书写回调函数,则默认返回promise实例,我们需要使用catch来接受异常也可以解决
      toNews(){
        this.$router.push(
        "/Home/News"
        )
        .catch(()=>{});
       },
       toMusic(){
        this.$router.push({name:"Music",}).catch(()=>{});
       },
        toGame(){
        this.$router.push({name:"Game",}).catch(()=>{});
       }
    }
}
</script>

<style scoped>
.active {
  background:skyblue;
}
</style>